<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件是通过以组件名作为标签名来直接使用的 -->
        <lunbotu></lunbotu>

        <zcm></zcm>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        //模块化和组件化？

        //组件，是对一个完整的功能模块的封装。他里面包含结构样式和行为，HTML+CSS+JS
        //组件化的目的，其实就是为了提高代码的可复用性，提供代码可维护性，便于人员分工


        //在Vue中组件怎么写？
        //component

        //组件的注册分为两种

        // 全局注册
        Vue.component("lunbotu", {
            template: "<div>这是我人生中的第一个Vue组件</div>"
        })

        Vue.component("zcm", {
            template: "<h1>我, 赵春明, 是这个世界上最帅的男人</h1>"
        })

        // 局部注册


        //Vue.filter
        //filters
        //Vue.directive
        //directives
        //Vue.component
        //components

        var vm = new Vue({
            el: "#app",
            data: {
            },
            components: {
                "zcm": {
                    template: "<h1>刚才那句话我是昧着良心说的！！</h1>"
                }
            }
        })
    </script>
</body>

</html>